<template>
	<view class="index-container">
		<!-- 搜索组件 S-->
		<mySearch v-if="searchShow"></mySearch>
		<!-- 搜索组件 E-->
		<!-- 轮播图 S -->
        <swiper class="banner" indicator-dots>
            <swiper-item v-for="item in banner" :key="item.id">
				<navigator :url="'/pkgGood/detail/detail?id='+item.id">
					<image class="img" mode="widthFix" :src="item.image_url"></image>
				</navigator>
            </swiper-item>
        </swiper>
        <!-- 轮播图 E -->
		<!-- 通知组件 S -->
		<u-notice-bar :text="notice"></u-notice-bar>
		<!-- 通知组件 E-->
		<!-- 菜单区域 S -->
		<u-grid :border="false" col="5">
		    <u-grid-item @click="goCate(item.id)"  v-for="item in channel" :key="item.id">
		        <image  class="menuImg" mode="widthFix" :src="item.icon_url"></image>
		        <text class="menuText">{{item.name}}</text>
		    </u-grid-item>
		</u-grid>
		<!-- 菜单区域 E -->
		<!-- 商品分类 S -->
		<view class="goodContainer" v-for="item in categoryList" :key="item.id">
		    <view  @click="goCate(item.id)"  class="titleBox">
		    <text >{{item.name}}</text>
		    </view>
		    <!-- 商品列表 S-->
		     <goodList :list="item.goodsList" :desc="true"></goodList>
		    <!-- 商品列表 E-->
		</view>
		<!-- 商品分类 E -->
    </view>
</template>
<script>
	export default {
		name:'Index',
		data() {
			return {
				banner:[],
				categoryList:[],
				channel:[],
				notice:'',
				searchShow:false
			}
		},
		// onLoad() {},
		onShow() {
			// 因为tabBar页面会被缓存，所以每次打开都会执行onShow
			this.getIndexData()
			this.searchShow = true // 搜索组件就会被创建
		},
		onHide(){
			this.searchShow = false // 搜索组件就会被销毁
		},
		methods: {
			// 获取首页数据方法
			async getIndexData(){
				// 1. 请求到了数据
				let res = await uni.$http.get('index/appInfo')
				// 2. 加工数据
				res.notice = res.notice.map((item,index)=>{
					return (index+1)+'、'+item.content
				}).join('  ')
				// 3. 赋值变量
				// this.banner = res.banner
				// this.categoryList = res.categoryList
				// this.channel = res.channel
				// this.notice = res.notice
				Object.keys(res).forEach(keyName=>{
					console.log(keyName);
					// this['banner'] =  res['banner']
					this[keyName] = res[keyName]
				})
			},
			// 跳转分类页面
			goCate(id){
				// 存储点击的分类ID
				uni.setStorageSync('cateId',id)
				uni.switchTab({
					url:'/pages/cate/cate'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.banner{
		.img{
			width: 100%;
		}
	}
	.menuImg{
		width: 80rpx;
	}
	.menuText {
		color: #888;
	}
	.titleBox{
		margin: 10rpx 0;
		background-color: #fafafa;
		padding: 20rpx 0;
		box-sizing: border-box;
		text-align: center;
		text{
			display: inline-block;
			border-bottom: 4rpx solid #409eff;
			color: #333;
			font-size: 28rpx;
		}
	}
	.goodContainer{
		padding: 0 20rpx;
	}
</style>